<template>
    <div class='icon-cnt'>
        <ul class="icons">
            <router-link
             tag="li"
             v-for="(item, index) in items"
             :key="index"
             :to="item.url"
             class="icon"
            >
                <span class="up" :style="{backgroundImage:'url('+item.img+')'}"></span>
                <span class="down">{{item.txt}}</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'selecticoncomponent',
    props: {
        items: Array
    }
}
</script>

<style lang="stylus" scoped>
.icon-cnt
    width 100%
    height  auto 
    box-sizing border-box
    padding 10px
    overflow hidden
    .icons 
        width 100%
        height auto
        display flex 
        overflow hidden
        display: flex;
        flex-wrap: wrap
        .icon 
            flex 1
            text-align center
            font-size 14px
            width 33.33%
            min-width 33.33%
            max-width 33.33%
            .up 
                display block
                width 100% 
                height 35px
                background-repeat no-repeat
                background-size contain
                background-position center
            .down 
                display block 
                width 100%
                height 30px
                line-height 30px
                color #999
                font-size 14px

</style>